<script setup lang="ts">
import { useMessage, NSelect, NSpace, NForm, NFormItem } from 'naive-ui'
import { reactive, ref, watch } from 'vue'
import { sendRequest } from '@/utils/api'
import type { processStatisticsModel } from '@/api/processStatistics'
import type { HttpResponse } from '@/utils/http'
import { useRoute } from 'vue-router'
import router from '@/router'
import BaseChart from '@/components/BaseChart'
import TableView from '@/components/TableView.vue'

const message = useMessage()
const route = useRoute()
const dataE = ref<any>([])
const ecartsLoading = ref(false)
const tempChartOption = ref()
const form = reactive({ type: 'approvalCount' })
const dataIdOptions = ref([
  { label: '审批中数量', value: 'approvalCount' },
  { label: '审批通过数量', value: 'passCount' },
  { label: '审批拒绝数量', value: 'rejectCount' },
  { label: '审批撤回数量', value: 'revokeCount' },
  { label: '流程总数量', value: 'count' },
  { label: '流程完结率', value: 'endRate' },
  { label: '流程平均时间', value: 'avgDay' }
])

const typeOptionsUpdate = (v: string) => {
  console.log(v)
  form.type = v
  getInitCharts()
}
const initCharts = () => {
  tempChartOption.value = {
    tooltip: {
      trigger: 'item',
      formatter: `{b}: {c}${form.type == 'endRate' ? '%' : ''}${form.type === 'avgDay' ? '天' : form.type !== 'endRate' ? '次' : ''} ({d}%)`,
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        radius: '85%',
        data: dataE.value,
        left: '25%',
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        labelLine: {
          show: true
        },
        label: {
          normal: {
            show: true
          }
        }
      }
    ]
  }
}
const getInitCharts = async () => {
  ecartsLoading.value = true
  const [error, res] = await sendRequest<HttpResponse<processStatisticsModel>>({
    module: 'processStatistics',
    api: 'pic',
    override: {
      params: {
        type: form.type
      }
    }
  })
  if (error) return message.error(error.message), (ecartsLoading.value = false)
  dataE.value = res.data
  await initCharts()
  ecartsLoading.value = false
}
const GoList = () => router.push('/oA/processStatistics/processStatistics')
const GoColumnar = () => router.push('/oA/processStatistics/columnar')
const GoPie = () => router.push('/oA/processStatistics/pie')

watch(
  () => route,
  () => {
    if (route.path == '/oA/processStatistics/pie') getInitCharts()
  },
  { deep: true, immediate: true }
)
</script>

<template>
  <TableView class="role">
    <template #form>
      <NSpace justify="end">
        <NSpace>
          <img class="img" @click="GoList" src="@/assets/images/list.png" />
          <img class="img" @click="GoColumnar" src="@/assets/images/columnar.png" />
          <img class="img" @click="GoPie" src="@/assets/images/pie.png" />
        </NSpace>
      </NSpace>
    </template>

    <template #table>
      <div style="background-color: #f0f0ee; height: 100%; padding: 15rem 15rem 0">
        <NSpace>
          <NForm :model="form" label-placement="left" label-width="135">
            <NSpace>
              <NFormItem label="选择类型:" path="type">
                <NSelect v-model:value="form.type" :options="dataIdOptions" filterable
                  @update-value="typeOptionsUpdate" />
              </NFormItem>
            </NSpace>
          </NForm>
        </NSpace>
        <div class="title">流程统计饼状图</div>
        <BaseChart style="width: 100%; height: 550rem" :options="tempChartOption" :loading="ecartsLoading" />
      </div>
    </template>
  </TableView>
</template>

<style lang="scss" scoped>
.role {
  padding: 29rem 30rem 42rem;
}

.img {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.title {
  font-size: 30px;
  font-weight: 600;
  position: absolute;
  top: 15%;
  left: 50%;
}
</style>
